"use client";

import { ColumnDef } from "@tanstack/react-table";
import { DataTable } from "./../../../components/DataTable/index";
import { Blog, GetBlogListDTO } from "@/modules/blog/types";
import {
  Eye,
  Pen,
  Plus,
  RotateCw,
  Search,
  TagsIcon,
  TypeIcon,
} from "lucide-react";
import { useSetState } from "ahooks";
import { defaultPageIndex, defaultPageSize } from "@/utils";
import { getBlogList } from "@/modules/blog/api";
import { Button } from "@/components/ui/button";
import { useRouter } from "nextjs-toploader/app";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { isUndefined } from "lodash-es";
import { cn } from "@/lib/utils";
import { PUBLISH_KAY, PUBLISHED_LABEL_MAP } from "@/types/enum";
import { Badge } from "@/components/ui/badge";

export default function Page() {
  const router = useRouter();

  const [pageData, setPageData] = useSetState<GetBlogListDTO>({
    pageIndex: defaultPageIndex,
    pageSize: defaultPageSize,
  });

  const [searchParams, setSearchParams] = useSetState<
    Omit<GetBlogListDTO, "pageIndex" | "pageSize">
  >({
    title: "",
    published: undefined,
  });

  const getBlogListController = getBlogList(pageData);

  const columns: ColumnDef<Blog>[] = [
    {
      accessorKey: "title",
      header: () => (
        <div className="flex items-center space-x-1">
          <TypeIcon className="size-4" />
          <span>标题</span>
        </div>
      ),
      cell: ({ row }) => {
        return (
          <div className="flex items-center space-x-2">
            <span className="font-medium">{row.original.title}</span>
          </div>
        );
      },
    },
    {
      accessorKey: "tags",
      header: () => (
        <div className="flex items-center space-x-1">
          <TagsIcon className="size-4" />
          <span>标签</span>
        </div>
      ),
      cell: ({ row }) => {
        return (
          <div className="flex flex-wrap gap-2">
            {row.original.tags.length
              ? row.original.tags.map((tag) => (
                  <Badge key={tag.id}>{tag.name}</Badge>
                ))
              : "无"}
          </div>
        );
      },
    },
    {
      accessorKey: "published",
      header: () => (
        <div className="flex items-center space-x-1">
          <Eye className="size-4" />
          <span>发布状态</span>
        </div>
      ),
      cell: ({ row }) => {
        return (
          <div className="flex items-center space-x-2">
            <span className="font-medium">
              {row.original.published ? "已发布" : "未发布"}
            </span>
          </div>
        );
      },
    },
    {
      id: "actions",
      cell: ({ row }) => {
        return (
          <div className="flex items-center gap-2">
            <Button
              size={"icon"}
              variant="outline"
              onClick={() => {
                router.push(`/admin/blog/handle/${row.original.id}`);
              }}
            >
              <Pen className="size-4" />
            </Button>
          </div>
        );
      },
    },
  ];

  const handleGoToCreate = () => {
    router.push("/admin/blog/handle/create");
  };

  const handleSearch = () => {
    setPageData({
      title: searchParams.title,
      published: searchParams.published,
    });
  };

  const handleReset = () => {
    setSearchParams({
      title: "",
      published: undefined,
    });
    setPageData({
      title: "",
      published: undefined,
      pageIndex: defaultPageIndex,
    });
  };

  return (
    <div className="flex flex-col gap-y-6 p-6 h-full w-full">
      <div className="flex flex-wrap justify-between gap-4 px-1">
        <div className="flex gap-x-2">
          <Input
            placeholder="请输入标题"
            value={searchParams.title}
            onChange={(v) => {
              setSearchParams({
                title: v.target.value,
              });
            }}
            onKeyUp={(e) => {
              if (e.key === "Enter") {
                handleSearch();
              }
            }}
          />

          <Select
            onValueChange={(v: PUBLISH_KAY) => {
              setSearchParams({ published: v });
            }}
            value={searchParams.published}
          >
            <SelectTrigger
              className={cn({
                "text-muted-foreground": isUndefined(searchParams.published),
              })}
            >
              <SelectValue placeholder="请选择发布状态" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value={PUBLISH_KAY.ALL}>
                {PUBLISHED_LABEL_MAP[PUBLISH_KAY.ALL]}
              </SelectItem>
              <SelectItem value={PUBLISH_KAY.PUBLISHED}>
                {PUBLISHED_LABEL_MAP[PUBLISH_KAY.PUBLISHED]}
              </SelectItem>
              <SelectItem value={PUBLISH_KAY.UNPUBLISHED}>
                {PUBLISHED_LABEL_MAP[PUBLISH_KAY.UNPUBLISHED]}
              </SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div className="flex items-center space-x-4">
          <Button onClick={handleSearch}>
            <Search className="mr-2 size-4" />
            搜索
          </Button>
          <Button onClick={handleReset}>
            <RotateCw className="mr-2 size-4" />
            重置
          </Button>
          <Button onClick={handleGoToCreate}>
            <Plus className="mr-2 size-4" />
            创建博客
          </Button>
        </div>
      </div>

      <DataTable
        columns={columns}
        data={getBlogListController.data?.blogs || []}
        pageData={pageData}
        setPageData={setPageData}
        total={getBlogListController.data?.total || 0}
        loading={getBlogListController.loading}
      />
    </div>
  );
}
